@import './variables';

html {
	height:100%;
	margin:0; 
}

body {
	font-family: Helvetica, sans-serif;
	height:100%;
	margin:0; 
	background: #efefef;
}

p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

#app, .page-main {
	width: 100%;
	height: 100%;
}

.float {
	position: absolute;
	z-index: 1;
	&.img {}
}

.text {
	&.title {
		font-size: 120px !important;
	}
	&.subtitle {
		font-size: 80px !important;
	}
	&.normal-title {
		font-size: 18px !important;
		font-weight: bold !important;
	}
	&.normal-subtitle {
		font-size: 16px !important;
	}
	&.content1 {
		font-size: 40px !important;
	}
	&.content2 {
		font-size: 25px !important;
	}
	&.center {
		text-align: center;
	}	
	&.right {
		text-align: end;
	}
	&.indent {
		text-indent: 2em;
	}
}

.img {
	&.fullsize {
		width: 100%;
	}
	&.surround {
		clear: both;
		&.left {
			float: left;
			padding-right: 10px;
			padding-bottom: 10px;
		}
	}
}

.vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.center {
	margin: 0 auto;
}

#header-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	z-index: 1;
	background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0));
}

.page-control {
	padding: 20px;
	border-top: 2px solid #eee;
}

.page-content {
	overflow: hidden;
	background: #fff;
	width: 980px;
	border-radius: 25px;
    box-shadow: 0 10px 15px #dbdbdb;
}